<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>select dir</title>

  
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script src="https://minglie.gitee.io/ming_autotest/src/static/lib/monacoeditor/min/vs/loader.js"></script>
        <script src="https://unpkg.com/ming_mock@2.0.10/index.js"></script>
  
        <script src="https://minglie.gitee.io/mingpage/static/smalltool/share_edit/static/launge_default_value.js"></script>
    
        <script src="./request.js"></script>
      </head>
    <style>
    body {
          font-family: Menlo, Consolas, monospace;
          color: #444;
        }
        .item {
          cursor: pointer;
        }
        .bold {
          font-weight: bold;
        }
        ul {
          padding-left: 13px;
          line-height: 1.5em;
          list-style-type:none;
        }
        img{
            width: 15px;
            height: 15px;
        }
        #box{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        #left{
            width:20%;
            height:10%;
            float:left;
        }

        #right{
            float:right;
            width:80%;
            height:10000px;
        }
        button{
          width: 100%;
          background-color: green;
        }
       
    </style>
<body>

<script>
      require.config({
            baseUrl: 'https://minglie.gitee.io/ming_autotest/src/static/lib/monacoeditor/', paths: { 'vs': 'min/vs' }
        });



M.languageMap={
    "jsx":"javascript",
    "js":"javascript",
    "md":"markdown",
    "conf":"lua"
}

function getlanguage(file){
        M.language = file.split(".")[1];
        if(Object.keys(M.languageMap).indexOf(M.language)>=0){
              M.language=M.languageMap[M.language];
        }
        return   M.language;
}

function mingload(language,content){
  $("#right").children().remove();
    require(['vs/editor/editor.main'], function() { 
          var editor = monaco.editor.create(document.getElementById('right'), {
              value:  content,
              language: language,
              theme:'vs-dark',
              automaticLayout:true,
              scrollbar: {
                  useShadows:false,
                  vertical:'visible',
                  horizontal:'visible',
                  horizontalSliderSize:5,
                  verticalSliderSize:5,
                  horizontalScrollbarSize:15,
                  verticalScrollbarSize:15,
              },
              quickSuggestions:true,
              overviewRulerBorder:true,
              minimap: {
                  enabled:false
              }
          });
          M.editor=editor;
      });
}


mingload('javascript',"sss")
   
</script>
</script>






<!-- item template -->
<script type="text/x-template" id="item-template">
  <li>
    <div  :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
      <img :src="isFolder ? 'https://ming-bucket-01.oss-cn-beijing.aliyuncs.com/static/img/folder.png':'https://ming-bucket-01.oss-cn-beijing.aliyuncs.com/static/img/file.png'"/>
         {{model.name}}
    </div>

    <ul v-show="open" v-if="isFolder">      
      <item   class="item"
        v-for="model in model.children"
        :model="model">
      </item>
    </ul>

  </li>
</script>

<div id="box">

    <div id="left">
       <button id="btnId">提交</button>
       <a id="btnaId" href="">提交</a>
      <ul id="demo">
        <item
          class="item"
          :model="treeData">
        </item>
      </ul>
    </div>
     
      <div id="right">
         
         
      </div>
</div>

</body>
   
    <script type="text/javascript" src="demo.js"></script>
</html>

<script>
    btnId.onclick=function(){

        let v= M.editor.getValue()
        let k=document.querySelector("#btnId").innerText;
        M.request.post("/updateFile?file="+k,v).then(d=>{
		    alert(d.data)
		})
    }

</script>